<template>
	<view class="wx-mt">
		<view style="height: 30rpx;background-color:#f5f7fa ;"></view>
		<view class="box-con">
			<view class="box-item">所屬項目：{{ showInfo.pmName || '' }}</view>
			<view class="box-item">病害位置：{{ showInfo.location || '' }}</view>
			<view class="box-item">
				<view style="display: flex;align-items: center;">
					<view>歷程：{{ showInfo.subLocation || '' }}</view>
					<view class="icon">{{  showInfo.priority || ''}}</view>
				</view>
			</view>
			<view class="box-item">病害描述：{{ showInfo.defectDescription || '' }}</view>
			<view class="box-item">病害編號：{{ showInfo.defectNo || '' }} </view>
			<view v-if="false">{{ showInfo.imageList }}</view>
			<commonLookImage :imageArr="showInfo.imageList" width="80px" height="80px"></commonLookImage>
		</view>

		<view class="form">
			<view class="form-item">
				<view class="label required">維修開始時間</view>
				<view @click="openPicker(1)" class="form-content">
					<view class="form-text" style="max-width: 336upx;">{{fillForm.constructionStartDate || ''}}</view>
					<u-icon v-if="disabled" name="arrow-down" color="#a7aebd" size="16"></u-icon>
				</view>
			</view>
			<u-datetime-picker @confirm="confirmBuildStartDate" @cancel="buildStartDatePicker = false" v-model="timeVal"
				:show="buildStartDatePicker" :minDate="showInfo.repairDate" mode="datetime" />
			<view class="form-item">
				<view class="label required">維修結束時間</view>
				<view @click="openPicker(2)" class="form-content">
					<view class="form-text" style="max-width: 336upx;">{{fillForm.constructionEndDate || ''}}</view>
					<u-icon v-if="disabled" name="arrow-down" color="#a7aebd" size="16"></u-icon>
				</view>
			</view>
			<u-datetime-picker @confirm="confirmBuildEndDate" @cancel="buildEndDatePicker = false" v-model="timeVal"
				:show="buildEndDatePicker" :minDate="showInfo.repairDate" mode="datetime" />
			<view class="form-item" @click="openPicker(3)">
				<view class="label required">維修狀態</view>
				<view class="form-content">
					<view class="form-text">{{ fillForm.repairState || '' }}</view>
					<u-icon v-if="disabled" name="arrow-down" color="#a7aebd" size="16"></u-icon>
				</view>
			</view>
			<u-picker :show="showStatePicker" :columns="stateColumns" @confirm="fnSure" @cancel="showStatePicker = false" keyName="code"></u-picker>
		</view>
	</view>
</template>

<script>
	import { handleFormatDate, compareDate } from "@/utils/date.js";
	export default {
		name: 'diseaseInfo',
		props:{
			showInfo:{
				type:Object,
				default:{}
			},
			disabled:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				fillForm: {
					constructionStartDate:'',
					constructionEndDate:'',
					repairState:'',
				},
				timeVal: Number(new Date()),
				buildStartDatePicker: false,
				buildEndDatePicker: false,
				showStatePicker:false,
				stateColumns:[[]]
			}
		},
		mounted() {
			this.stateColumns = [this.$store.getters.dictMap['repair_state']]
		},
		methods: {
			confirmBuildStartDate(event) {
				this.fillForm.constructionStartDate = handleFormatDate(event.value, 3)
				this.buildStartDatePicker = false;
			},
			confirmBuildEndDate(event) {
				this.fillForm.constructionEndDate = handleFormatDate(event.value, 3)
				this.buildEndDatePicker = false;
			},
			fnSure(obj) {
				console.log(obj)
				this.fillForm.repairState = obj.value[0].code
				this.showStatePicker = false
			},
			openPicker(type) {
				if(!this.disabled) return
				if(type === 1) {
					this.buildStartDatePicker = true
				}else if(type === 2) {
					this.buildEndDatePicker = true
				}else if(type === 3) {
					this.showStatePicker = true
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.wx-mt {
		/* #ifdef MP-WEIXIN */
		margin-top: 200rpx;
		/* #endif */
	}
	.box-con {
		// margin-top: 16upx;
		margin: 50rpx 0 20rpx 30rpx;
		line-height: 28upx;
		font-size: 28upx;
		color: #6a819e;

		.box-item {
			font-weight: bold;
			margin: 30upx 4upx;
			line-height: 28upx;
			max-width: 700upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.icon {
				width: 50rpx;
				padding: 6rpx 20rpx;
				clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
				height: 24rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 24rpx;
				background: linear-gradient(90deg, #ff5f2c 0%, #ff9e39 100%);
				text-align: center;
				opacity: 1;
			}
		}
	}

	.form {
		background: #fff;
		padding-top: 26upx;

		.form-item {
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 30upx;
			border-bottom: 1px solid #e2e5ed;

			&:last-of-type {
				border-bottom: none;
			}

			.label {
				color: #445469;
				line-height: 44upx;
				flex-shrink: 0;
			}

			.form-content {
				color: #22204e;
				display: flex;
				align-items: center;
			}

			.form-text {
				line-height: 58upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 302upx;
			}

			.form-text.none {
				opacity: .7;
				font-size: 30rpx;
			}

			.u-icon {
				margin-left: 40upx;
			}

			.uicon-close-circle-fill {
				margin-left: 32upx;
			}

		}

	}

	.required {
		&::before {
			content: "*";
			color: #ff6a6a;
		}
	}
</style>